<template>
  <div id="person" class="container">
    <h1>更多美食家</h1>
    <el-row :gutter="10">
      <el-col
        :xs="12"
        :sm="8"
        :md="8"
        :lg="6"
        :xl="6"
        v-for="(result,index) in userList"
        :key="result.userId"
      >
        <div class="grid-content bg-purple person_div">
          <el-col :span="24">
            <div class="personImg">
              <img :src="'/api/upload/'+result.userImg" alt />
            </div>
          </el-col>
          <p class="personname">{{result.userName}}</p>
          <p class="fannum">{{result.fansNum}}粉丝</p>
          <!-- <input type="button" value="+关注" ref="add" class="guanzhu" @click="guzhu" /> -->
          <button @click="focus(index)" ref="add" class="guanzhu">+关注</button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "person",
  data() {
    return {
      userList: [],
      selfId: 0,
      indexFocusBtn: []
    };
  },
  created() {
    //获取所有用户详情信息
    this.$axios
      .get("/api/createNote/getUser")
      .then(res => {
        this.userList = res.data.data;
        // console.log("userList:", this.userList);
        //获取用户信息
        this.$axios
          .get("/api/users/getUserInfo")
          .then(res => {
            this.getUserInfo = res.data.data;
            // console.log("getUserInfo", this.getUserInfo);
            //获取首页关注按钮状态
            this.$axios
              .get("/api/createNote/indexFocusBtn", {
                params: {
                  userId: this.userList[0].userId,
                  selfId: this.getUserInfo[0].userId
                }
              })
              .then(res => {
                console.log("indexFocusBtn:", res.data.data);
                this.indexFocusBtn = res.data.data;
              })
              .catch(err => {
                console.log("err:", err);
              });
          })
          .catch(err => {
            console.log("err:", err);
          });
      })
      .catch(err => {
        console.log("err:", err);
      });
  },
  watch: {
    userList: {
      handler(newValue, old) {
        this.$axios
          .get("/api/users/getUserInfo")
          .then(res => {
            console.log("user", res.data.data[0].userId);
            this.selfId = res.data.data[0].userId;
            console.log("selfId", this.selfId);
            for (let i = 0; i < this.userList.length; i++) {
              //
              this.$axios
                .get("/api/createMenu/focusget", {
                  params: {
                    otheruserId: this.userList[i].userId,
                    myId: this.selfId
                  }
                })
                .then(res => {
                  if (res.data.data.length != 0) {
                    this.$refs.add[i].style.backgroundColor = "#E6A23C";
                    this.$refs.add[i].style.border = "1px solid #E6A23C";
                    this.$refs.add[i].style.color = "#fff";
                    this.$refs.add[i].innerHTML = "取消关注";
                    console.log(this.$refs.add[i].innerHTML);
                  } else {
                    //  aliert("保存未关注")
                    this.$refs.add[i].styiile.backgroundColor = "#fff";
                    this.$refs.add[i].style.border = "1px solid #000";
                    this.$refs.add[i].style.color = "#000";
                    this.$refs.add[i].innerHTML = "+关注";
                    console.log(this.$refs.add[i].innerHTML);
                  }
                })
                .catch(err => {
                  console.log("err", err);
                });
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    }
  },
  methods: {
    focus(index) {
      if (this.$refs.add[index].innerHTML == "+关注") {
        this.$refs.add[index].style.backgroundColor = "#c22223";
        this.$refs.add[index].style.border = "1px solid #c22223";
        this.$refs.add[index].style.color = "#fff";
        this.$refs.add[index].innerHTML = "取消关注";
        this.$axios
          .get("/api/users/getfocus", {
            params: {
              userId: this.userList[index].userId,
              selfId: this.getUserInfo[0].userId
            }
          })
          .then(res => {
            alert("关注成功");
          })
          .catch(err => {
            console.log("err:", err);
          });
      } else if (this.$refs.add[index].innerHTML == "取消关注") {
        this.$refs.add[index].style.backgroundColor = "#fff";
        this.$refs.add[index].style.border = "1px solid #000";
        this.$refs.add[index].style.color = "#000";
        this.$refs.add[index].innerHTML = "+关注";
        this.$axios
          .get("/api/users/delfocus", {
            params: {
              userId: this.userList[index].userId,
              selfId: this.getUserInfo[0].userId
            }
          })
          .then(res => {
            alert("取消关注");
          })
          .catch(err => {
            console.log("err:", err);
          });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
#person {
  margin-bottom: 50px;
}
h1 {
  font-size: 20px;
  margin-top: 100px;
}
.person_div {
  padding: 15px;
  text-align: center;
  width: 90%;
  height: 225px;
  margin-top: 30px;
  box-shadow: 1px 1px 9px 0px #ddd, 0 0 6px #ddd;
}
.personImg {
  position: relative;
  left: 25%;
  border-radius: 50%;
  overflow: hidden;
  width: 100px;
  height: 100px;
}
.personImg img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.personname {
  margin: 0;
}
.fannum {
  color: #999;
  margin: 0;
}
.guanzhu {
  width: 70%;
  height: 40px;
  border: 1px solid black;
  border-radius: 10px;
  font-size: 14px;
  text-align: center;
  background-color: white;
}
.bg-purple-dark {
  box-shadow: 0 2px 4px #ddd, 0 0 6px #ddd;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 20px;
}
</style>